﻿<!-- #layout name=blank-->
<div id="app">
  <div class="page-header">
    <h1 class="title">Publishing</h1>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>
  <div class="navbar navbar-default">
    <div class="container-fluid">
      <a
        v-if="!isPulling"
        class="btn green navbar-btn"
        @click.stop="onPullToLocal"
        >Pull to local</a
      >
      <a v-else class="btn green navbar-btn disabled"
        ><i class="fa fa-spinner fa-spin"></i> <span>Pulling</span></a
      >

      <a
        v-if="!isPushing"
        class="btn green navbar-btn"
        @click.stop="pushToRemote"
        :disabled="selectedItems.length <= 0"
        >Push to remote</a
      >
      <a v-else class="btn green navbar-btn disabled"
        ><i class="fa fa-spinner fa-spin"></i> <span>Pushing</span></a
      >
    </div>
  </div>
  <kb-tabs :active.sync="tabIndex">
    <kb-container>
      <template #header>{{ Kooboo.text.site.sync.localChanges}}</template>
      <template #content>
        <kb-table
          :show-select="true"
          :data="pushItems"
          :selected.sync="selectedItems"
        >
          <kb-table-column>
            <template #head>Name</template>
            <template v-slot="row">
              <span v-if="row.thumbnail" class="thumbnail-fixed">
                <span class="img-wrap">
                  <img :src="''" />
                </span>
              </span>
              <template v-else>{{ row.name }}</template>
            </template>
          </kb-table-column>
          <kb-table-column>
            <template #head>Object Type</template>
            <template v-slot="row">
              <span class="label label-sm label-primary"
                >{{Kooboo.text.component.table[ row.objectType.toLowerCase()] ||
                row.objectType}}</span
              >
            </template>
          </kb-table-column>
          <kb-table-column>
            <template #head>Action</template>
            <template v-slot="row">
              <span
                class="label label-sm"
                :class="getChangeClass(row.changeType)"
                >{{Kooboo.text.action[row.changeType.toLowerCase()] ||
                row.changeType}}</span
              >
            </template>
          </kb-table-column>
          <kb-table-column>
            <template #head>Size</template>
            <template v-slot="row">
              {{ row.size }}
            </template>
          </kb-table-column>
          <kb-table-column>
            <template #head>Last modified</template>
            <template v-slot="row">
              {{ new Date(row.lastModified).toDefaultLangString()}}
            </template>
          </kb-table-column>
        </kb-table>
      </template>
    </kb-container>
    <kb-container>
      <template #header>{{Kooboo.text.site.sync.pullLog}}</template>
      <template #content>
        <kb-table :show-select="false" :data="dynamicItems">
          <kb-table-column>
            <kb-table-column>
              <template #head>Last modified</template>
              <template v-slot="row">
                {{ new Date(row.lastModified).toDefaultLangString()}}
              </template>
            </kb-table-column>
            <template #head>Name</template>
            <template v-slot="row">
              <span v-if="row.thumbnail" class="thumbnail-fixed">
                <span class="img-wrap">
                  <img :src="''" />
                </span>
              </span>
              <template v-else>{{ row.name }}</template>
            </template>
          </kb-table-column>
          <kb-table-column>
            <template #head>Object Type</template>
            <template v-slot="row">
              <span class="label label-sm label-primary"
                >{{Kooboo.text.component.table[ row.objectType.toLowerCase()] ||
                row.objectType}}</span
              >
            </template>
          </kb-table-column>
          <kb-table-column>
            <template #head>Action</template>
            <template v-slot="row">
              <span
                class="label label-sm"
                :class="getChangeClass(row.changeType)"
                >{{Kooboo.text.action[row.changeType.toLowerCase()] ||
                row.changeType}}</span
              >
            </template>
          </kb-table-column>
          <kb-table-column>
            <template #head>Size</template>
            <template v-slot="row">
              {{ row.size }}
            </template>
          </kb-table-column>
        </kb-table>
      </template>
    </kb-container>
    <kb-container>
      <template #header>{{Kooboo.text.site.sync.pushLog}}</template>
      <template #content>
        <kb-table :show-select="false" :data="dynamicItems">
          <kb-table-column>
            <kb-table-column>
              <template #head>Last modified</template>
              <template v-slot="row">
                {{ new Date(row.lastModified).toDefaultLangString()}}
              </template>
            </kb-table-column>
            <template #head>Name</template>
            <template v-slot="row">
              <span v-if="row.thumbnail" class="thumbnail-fixed">
                <span class="img-wrap">
                  <img :src="''" />
                </span>
              </span>
              <template v-else>{{ row.name }}</template>
            </template>
          </kb-table-column>
          <kb-table-column>
            <template #head>Object Type</template>
            <template v-slot="row">
              <span class="label label-sm label-primary"
                >{{Kooboo.text.component.table[ row.objectType.toLowerCase()] ||
                row.objectType}}</span
              >
            </template>
          </kb-table-column>
          <kb-table-column>
            <template #head>Action</template>
            <template v-slot="row">
              <span
                class="label label-sm"
                :class="getChangeClass(row.changeType)"
                >{{Kooboo.text.action[row.changeType.toLowerCase()] ||
                row.changeType}}</span
              >
            </template>
          </kb-table-column>
          <kb-table-column>
            <template #head>Size</template>
            <template v-slot="row">
              {{ row.size }}
            </template>
          </kb-table-column>
        </kb-table>
      </template>
    </kb-container>
  </kb-tabs>
  <kb-pager
    v-if="pager"
    :page-nr="pager.pageNr"
    :total-pages="pager.totalPages"
    @change="changePage"
  ></kb-pager>
</div>

<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/components/kbBreadcrumb.js",
      "/_Admin/Scripts/components/kbTable.js",
      "/_Admin/Scripts/components/kbTabs.js",
      "/_Admin/Scripts/components/kbPager.js"
    ]);
  })();
</script>
<script src="/_Admin/View/Sync/List.js"></script>
